<template>
  <div>
    <div :class="style">
      <p>
        {{ content }}
        <br>
        <span>{{ time }}</span>
        <img :src="avatar" :class="imgStyle">
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChatItem",
  props: ['sender', 'content', 'avatar', 'isSelf', 'time'],
  data() {
    return {
      style: '',
      imgStyle: ''
    }
  },
  mounted() {
    if (this.isSelf) {
      this.style = 'message my_message'
      this.imgStyle = 'img-right'
    } else {
      this.style = 'message frnd_message'
      this.imgStyle = 'img-left'
    }
  }
}
</script>

<style scoped>
.message {
  position: relative;
  display: flex;
  width: 100%;
  margin: 5px 0;
}

.img-left {
  float: right;
  width: 30px;
  height: 30px;
  border-radius: 30px;
}

.img-right {
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 30px;
}

.message p {
  position: relative;
  right: 0;
  text-align: left;
  max-width: 65%;
  padding: 12px;
  background: #6f439f;
  border-radius: 10px;
  font-size: 0.9em;
  word-wrap: break-word;
}

.message p::before {
  content: '';
  position: absolute;
  top: 0;
  right: -12px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #6f439f 0%, #6f439f 50%, transparent 50%, transparent);
}

.message p span {
  text-align: left;
  display: block;
  margin-top: 5px;
  font-size: 0.85em;
  opacity: 0.5;
}

.my_message p span {
  text-align: right;
  display: block;
  color: white;
}

.my_message {
  justify-content: flex-end;
}

.frnd_message {
  justify-content: flex-start;
}

.my_message > p {
  color: white;
}

.frnd_message p {
  background: #f3f3f3;
  text-align: left;
  word-wrap: break-word;
}

.message.frnd_message p::before {
  content: '';
  position: absolute;
  top: 0;
  left: -12px;
  width: 20px;
  height: 20px;
  background: linear-gradient(225deg, #f3f3f3 0%, #f3f3f3 50%, transparent 50%, transparent);
}
</style>